<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-select style="width: 120px" placeholder="请选择审批类型" v-model="queryParam.type">
          <template v-for="item in options">
            <a-select-option :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </template>
        </a-select>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
      >

        <span slot="approval_status" slot-scope="text, record">
          <a-badge status="success" v-if="record.approval_status === '1'" text="同意"/>
          <a-badge status="error" v-else-if="record.approval_status === '2'" text="拒绝"/>
          <a-badge status="default" v-else text="待处理"/>
        </span>

      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getList } from '@/api/record'

const columns = [
  {
    title: '审批编号',
    dataIndex: 'id'
  },
  {
    title: '申请人',
    align: 'center',
    dataIndex: 'user_name',
  },
  {
    title: '审批人',
    align: 'center',
    dataIndex: 'approval_name',
  },
  {
    title: '审批时间',
    align: 'center',
    dataIndex: 'updated_at',
    customRender: e => {
      return e ? moment(e).format('YYYY-MM-DD HH:mm:ss') : '-'
    }
  },
  {
    title: '审核状态',
    align: 'center',
    dataIndex: 'approval_status',
    scopedSlots: { customRender: 'approval_status' }
  },
]

export default {
  name: 'Clothing',
  components: {
    STable,
    Ellipsis,
  },
  data () {
    this.columns = columns
    return {
      confirmLoading: false,
      // 查询参数
      queryParam: {
        type: '1'
      },
      options: [
        {
          label: '转正申请',
          value: '1'
        },{
          label: '调岗申请',
          value: '2'
        },{
          label: '离职申请',
          value: '3'
        },{
          label: '加班申请',
          value: '4'
        },{
          label: '服装申请',
          value: '5'
        },{
          label: '保险缴费申请',
          value: '6'
        },{
          label: '保险断缴申请',
          value: '7'
        },{
          label: '公章申请',
          value: '8'
        },{
          label: '费用申报',
          value: '9'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getList(requestParameters)
          .then(res => {
            return res.data
          })
      },
    }
  },
  mounted() {
    this.$watch('queryParam.type', e => {
      this.$refs.table.refresh()
    })
  },
}
</script>
